<template>
    <div class="share">
        <img src="@/assets/images/椭圆形备份 2@2x.png" alt="">
        <input type="text">
        <button>发布</button>
    </div>
    <div class="tips">
        <span href="#">最热</span>
        <i class="split"></i>
        <span href="#">最新</span>
    </div>
    <!-- 评论循环的盒子 -->
    <div class="forToComment">
        <div class="content-comment">
            <div class="comment-left">
                <div class="comment-left-1">
                    <img src="./../../assets/imgs/椭圆形备份 2(2).png" alt="">
                </div>
                <div class="comment-left-2">
                    <div class="item-1">WN_3481</div>
                    <div class="item-2">还可以，讲非常深刻，学习上手快</div>
                    <div class="item-3">2023-03-20 12:59</div>
                </div>
            </div>
            <div class="comment-right">
                <img src="./../../assets/imgs/icon_weidianzhan.png" alt="" v-show="isShow" @click="showClick">
                <img src="./../../assets/imgs/icon_yidianzhan.png" alt="" v-show="isShow == false" @click="showClick">
                <span>10</span>
            </div>
        </div>
        <div class="line"></div>
    </div>
    <!-- 复制的第二个（后面删除） -->
    <div class="forToComment">
        <div class="content-comment">
            <div class="comment-left">
                <div class="comment-left-1">
                    <img src="./../../assets/imgs/椭圆形备份 2(2).png" alt="">
                </div>
                <div class="comment-left-2">
                    <div class="item-1">WN_3481</div>
                    <div class="item-2">还可以，讲非常深刻，学习上手快</div>
                    <div class="item-3">2023-03-20 12:59</div>
                </div>
            </div>
            <div class="comment-right">
                <img src="./../../assets/imgs/icon_weidianzhan.png" alt="" v-show="twoShow" @click="showClick1">
                <img src="./../../assets/imgs/icon_yidianzhan.png" alt="" v-show="twoShow == false" @click="showClick1">
                <span>10</span>
            </div>
        </div>
        <div class="line"></div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref } from 'vue'
const btnClass = ref<number>(0);
const isShow = ref<boolean>(true);
const twoShow = ref<boolean>(true);
function showClick() {
    isShow.value = !isShow.value;
}
function showClick1() {
    twoShow.value = !twoShow.value
}
function enentClick(n: any) {
    btnClass.value = -1;
    btnClass.value = n
}
</script>

<style scoped lang=scss>
.share {
    
    display: flex;
    height: 0.75rem;
    margin-bottom: 0.4rem;

    img {

        width: 0.75rem;
        height: 0.75rem;
    }

    input {

        width: 8.075rem;
        border: none;
        height: 0.75rem;
        background: #F2F2F2;
        border-radius: 0.15rem;
        margin-right: 0.15rem;
    }

    button {
        width: 1.35rem;
        border: none;
        height: 0.75rem;
        background: #139DFF;
        border-radius: 0.1rem;
    }
}

.tips {
    display: flex;
    height: 0.2rem;
    align-items: center;

    span {
        display: block;
        font-size: 0.2rem;
        padding: 0 8px;
    }

    .split {
        width: 2px;
        height: 100%;
        background-color: #000;
    }

}

.content-comment {
    height: 1.375rem;
    width: 10.55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;

    .comment-left {
        height: 100%;
        width: 4.775rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .comment-left-1 {
            height: 0.6625rem;
            width: 0.6rem;

            img {
                width: 100%;
                height: 100%;
                margin-left: 0.125rem;
            }
        }

        .comment-left-2 {
            width: 3.975rem;
            height: 100%;
            font-size: 0.25rem;

            .item-1 {
                font-weight: bold;
                margin-top: 0.1875rem;
                margin-bottom: 0.1875rem;
            }

            .item-2 {
                font-size: 0.225rem;
                margin-bottom: 0.125rem;
            }

            .item-3 {
                font-size: 0.1875rem;
                color: #cdcdcd;
            }
        }
    }

    .comment-right {
        height: 100%;
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        img {
            width: 0.375rem;
            height: 0.375rem;
            margin-right: 0.1875rem;
        }

        span {
            font-size: 0.25rem;
        }
    }
}

.line {
    border: 1px solid #e5e5e5;
}
</style>